<template>
	<view class="index">
		<!-- <view class="header" :style="{'paddingTop':height+'px'}">
			<view class="header-top">
				<view style="display: inline-block;" :style="{'marginTop':5+'px'}">
					<view class="type-box f ai-c jc-c" @click="showType">
						<view>{{typeData?typeData.name:''}}</view>
						<image src="../../static/jt.png"></image>
					</view>
				</view>
				<view class="search f ai-c jc-c" @click="handleSearch">
					<image src="../../static/search.png"></image>
				</view>
			</view>

		</view> -->
		<view class="header" :style="{'paddingTop':height+'px'}">
			<view style="display: inline-block;" :style="{'marginTop':5+'px'}">
				<view class="type-box f ai-c jc-c" @click="showType">
					<view>{{typeData?typeData.name:''}}</view>
					<image src="../../static/jt.png"></image>
				</view>
			</view>
			<view class="f jc-s-b ai-c classify">
				<scroll-view class="classify-l f" scroll-x="true">
					<view v-for="(item, index) in classifyList" :key="index" :class="curt==index?'active':''"
						@click="changeClassify(index)">
						{{item.name}}
					</view>
				</scroll-view>
				<view class="search f ai-c jc-c" @click="handleSearch">
					<image src="../../static/search.png"></image>
				</view>
			</view>
		</view>
		<view class="banner" :style="{'paddingTop':height+35+'px'}">
			<u-swiper :list="bannerList" indicator keyName="file"></u-swiper>
		</view>
		<view class="list">
			<view v-for="(item,index) in list" :key="index" @click="toList(item)">
				<view class="list-box f ai-c jc-s-b">
					<view class="poster-box">
						<view class="pieces">共{{item.info_num}}篇</view>
						<image :src="item.image" class="poster"></image>
					</view>
					<view class="info f fd-c f1">
						<view class="title">
							{{item.title}}
						</view>
						<view class="f ai-c jc-s-b browse">
							<view>{{item.read_num}}人浏览</view>
							<view class="f ai-c">
								<image
									:src="item.is_collection?'../../static/collect-active.png':'../../static/collect.png'"
									class="collect" @click.stop="handleCollect(item)"></image>
								<image src="../../static/more.png" class="more" @click.stop="handleMore(index)"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="f jc-s-b more-box" v-show="item.checked">
					<view class="f fd-c ai-c" @click.stop="handleCollect(item)">
						<image src="../../static/list-collect.png"></image>
						收藏
					</view>
					<view class="f fd-c ai-c" v-show="item.is_download==1">
						<image src="../../static/download.png"></image>
						下载
					</view>
					<view class="f fd-c ai-c">
						<button open-type="share" :data-obj="item" catchtap="share" style="">
							<image src="../../static/share.png"></image>
							<text>分享</text>
						</button>
					</view>
					<view class="f fd-c ai-c" @click.stop="handleShare(item)">
						<image src="../../static/pyq.png"></image>
						朋友圈
					</view>

				</view>
			</view>

		</view>

		<TypeModel ref="typeModel" @changeType="changeType" />
		<!-- 进群 -->
		<JoinGroup ref="joinGroup" />
	</view>
</template>

<script>
	import {
		databaseBanner,
		getTypeList,
		getDatabaseSetList,
		collectionDatabaseSet
	} from '@/api/index.js'
	import JoinGroup from '@/components/JoinGroup/index.vue'

	import TypeModel from '@/components/TypeModel/index.vue'
	export default {
		components: {
			TypeModel,
			JoinGroup
		},
		data() {
			return {
				height: 0,
				curt: 0,
				twoCurt: 0,
				list: [],
				bannerList: [],
				typeList: [], //类型
				typeData: {},
				classifyList: [], //一级分类
				classifyData: {},
				twoClassifyList: [], //二级分类
				twoClassifyData: {},
				queryParams: {
					page: 1,
					limit: 10,
					type_id: '',
					
				},
				loading: false,
				total: 0
			}
		},
		onLoad() {
			this.getTypelistData()
		},
		onShow() {
			this.getBanner()
		},
		onReady() {
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.top;
					console.log(custom, '高度')

				}

			})

		},
		onPullDownRefresh() {
			this.queryParams.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (this.total == this.list.length) return
			this.queryParams.page++
			this.getList()
		},
		onShareAppMessage(res) {
			const data = res.target.dataset.obj
			if (res.from === 'button') {
				// 来自页面内转发按钮
				return {
					title: data.title,
					path: `/pages/share/share?type=1&id=${data.id}&shareType=friend&database_type=2`,
					imageUrl: data.image
				};
			}
		},
		methods: {
			//分享到朋友圈
			handleShare(data) {
				uni.navigateTo({
					url: `/pages/share/share?type=1&id=${data.id}&shareType=pyq&database_type=2`
				})
			},
			toList(data) {
				data.read_num=data.read_num+1
				uni.navigateTo({
					url: `/pages/information/list?id=${data.id}`
				})
			},
			async handleCollect(data) {
				if (data.is_collection) {
					uni.showModal({
						title: '提示',
						content: '确定取消收藏',
						success: async function(res) {
							if (res.confirm) {
								data.is_collection = !data.is_collection
								await collectionDatabaseSet({
									set_id: data.id,
									title: data.title
								})
				
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					data.is_collection = !data.is_collection
					await collectionDatabaseSet({
						set_id: data.id,
						title: data.title
					})
				}
			},

			//获取报考类型
			async getTypelistData() {
				const {
					data
				} = await getTypeList({})
				this.typeList = data
				if (data.length > 0) {
					this.typeData = data[0]
					
							this.queryParams.page = 1
						this.list = []
						this.loading = true
						this.getList()
				}
				this.$refs.typeModel?.setData(this.typeList)
			},
			//选择报考类型
			changeType(data, index) {
				this.typeData = data
				this.queryParams.page = 1
				this.list = []
				this.loading = true
				this.getList()
				

			},
			
			async getList() {
				
				this.queryParams.type_id = this.typeData.id
				// this.queryParams.type2_id = this.classifyData?.id || ''
				// this.queryParams.type3_id = this.twoClassifyData?.id || ''
				const {
					data
				} = await getDatabaseSetList(this.queryParams)
				this.loading = false
				this.total = data.total
				uni.stopPullDownRefresh();
				data.items.forEach(item => {
					item.checked = false
				})
				this.list = this.list.concat(data.items)
			},
			//获取banner
			async getBanner() {
				const {
					data
				} = await databaseBanner({
					type: 2
				})
				this.bannerList = data
			},

			//搜索
			handleSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			//pdf详情
			toDetail() {
				uni.navigateTo({
					url: '/pages/pdf/pdf'
				})
			},
			//点击更多
			handleMore(index) {
				this.list.forEach((item, itemIndex) => {
					if (index == itemIndex) {
						item.checked = !item.checked
					} else {
						item.checked = false
					}

				})
			},
			showType() {
				this.$refs.typeModel.setPopup();
			}
		}
	}
</script>

<style scoped lang="scss">
	button {
		background-color: transparent;
		border: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		font-size: 22rpx;
		color: #464e59;

		text {
			position: relative;
			margin-top: -14rpx;
		}
	}

	button::after {
		border: none;
	}

	.index {
		background: #f7f8fc;
		min-height: 100vh;

		.list {
			width: 710rpx;
			margin: auto;

			.more-box {
				font-size: 22rpx;
				color: #464e59;
				margin-top: 24rpx;
				margin-bottom: 10rpx;
				padding: 0 24rpx;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 8rpx;
				}
			}

			.list-box {
				background: #fff;
				border-radius: 24rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;

				.info {
					.browse {
						color: #999999;
						font-size: 24rpx;
						margin-top: 40rpx;

						.collect {
							width: 30rpx;
							height: 30rpx;
							margin-right: 16rpx;
						}

						.more {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.title {
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-weight: 700;
					}

					.recommend {
						background: linear-gradient(to right, #36c684, #03c9ba);
						width: 80rpx;
						height: 35rpx;
						color: #fff;
						font-size: 24rpx;
						border-radius: 8rpx;
						display: inline-block;
						text-align: center;
						margin-right: 8rpx;
						line-height: 35rpx;
						font-weight: 800;
					}
				}

				.poster-box {
					position: relative;

					.pieces {
						position: absolute;
						left: 0;
						top: 0;
						color: #91aeff;
						font-size: 20rpx;
						background: rgba(0, 0, 0, 0.2);
						border-radius: 0 0rpx 20rpx 0;
						width: 90rpx;
						height: 35rpx;
						text-align: center;
						line-height: 35rpx;
					}
				}

				.poster {
					width: 170rpx;
					height: 210rpx;
					margin-right: 16rpx;
					border-radius: 0 24rpx 24rpx 0;
				}
			}
		}

		.banner {
			width: 710rpx;
			height: 260rpx;
			margin: 24rpx auto;
		}

		.header {
			width: 100%;
			position: fixed;
			padding-left: 32rpx;
			padding-right: 32rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			background: linear-gradient(to top, #f5f7fc, #3b70ff);
			border-radius: 0 0 50rpx 50rpx;
			left: 0;
			top: 0;
			z-index: 1111;

			.header-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 200rpx;
				box-sizing: border-box;
			}

			.twoClassify {
				margin-top: 14rpx;
				height: 52rpx;

				.twoClassify-l {
					width: 100%;
					white-space: nowrap;

					view {
						display: inline-block;
						font-size: 24rpx;
						color: #999;
						margin-right: 28rpx;
						background: #fff;
						border-radius: 40rpx;
						padding: 10rpx 20rpx;
						box-sizing: border-box;
					}

					.active {
						color: #fff;
						font-weight: 800;
						background: #3b70ff;
					}
				}
			}

			.search {
				width: 55rpx;
				height: 55rpx;
				background: #fff;
				border-radius: 50%;

				image {
					width: 25rpx;
					height: 25rpx;
				}
			}

			.classify {
				margin-top: 24rpx;
				box-sizing: border-box;
				position: relative;
				z-index: 11;



				.classify-l {
					width: 80%;
					white-space: nowrap;

					view {
						display: inline-block;
						font-size: 28rpx;
						color: #464e59;
						margin-right: 28rpx;
					}

					.active {
						color: #000;
						font-weight: 800;
						font-size: 32rpx;
					}
				}
			}

			.type-box {
				position: relative;
				z-index: 11;
				background: #fff;
				height: 50rpx;
				font-size: 28rpx;
				border-radius: 50rpx;
				border: 4rpx solid #1e265d;
				color: #1e265d;
				min-width: 150rpx;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 4rpx;
				}
			}

			.bg-img {
				width: 100%;
				height: 210rpx;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 0 0 50rpx 50rpx;
			}
		}
	}
@media only screen and (min-width: 750px) {
		button {
			background-color: transparent;
			border: none;
			padding: 0;
			display: flex;
			flex-direction: column;
			font-size: 11rpx;
			color: #464e59;
		
			text {
				position: relative;
				margin-top: -10rpx;
			}
		}

		.index {
			/deep/ .u-swiper {
				width: 375px;
				height: 130px !important;
				margin: auto;

				.u-swiper__wrapper {
					height: 130px !important;
				}

				.u-swiper__wrapper__item__wrapper__image {
					height: 130px !important;
				}
			}

			.banner {
				margin-top: 40px;
				height: auto;
			}

			.list {
				width: 375px;
				margin: auto;

				.more-box {
					font-size: 11px;
					color: #464e59;
					margin-top: 24px;
					margin-bottom: 10px;
					padding: 0 12px;
					box-sizing: border-box;

					image {
						width: 20px;
						height: 20px;
						margin-bottom: 8px;
					}
				}

				.list-box {
					background: #fff;
					border-radius: 12px;
					padding: 12px;
					box-sizing: border-box;
					margin-bottom: 16px;

					.info {
						.browse {
							color: #999999;
							font-size: 14px;
							margin-top: 20px;

							.collect {
								width: 15px;
								height: 15px;
								margin-right: 8px;
							}

							.more {
								width: 15px;
								height: 15px;
							}
						}

						.title {
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 14px;
							font-weight: 700;
						}

						.recommend {
							background: linear-gradient(to right, #36c684, #03c9ba);
							width: 20px;
							height: 17px;
							color: #fff;
							font-size: 12px;
							border-radius: 4px;
							display: inline-block;
							text-align: center;
							margin-right: 4px;
							line-height: 17px;
							font-weight: 800;
							position: relative;
							top: 15px;
						}
					}
					.poster-box {
						position: relative;
					
						.pieces {
							position: absolute;
							left: 0;
							top: 0;
							color: #91aeff;
							font-size: 10px;
							background: rgba(0, 0, 0, 0.2);
							border-radius: 0 0rpx 10px 0;
							width: 45px;
							height: 17px;
							text-align: center;
							line-height: 17px;
						}
					}

					.poster {
						width: 85px;
						height: 105px;
						margin-right: 16px;
					}
				}
			}


			.header {
				width: 100%;
				position: fixed;
				padding-left: 16px;
				padding-right: 16px;
				padding-bottom: 20px;
				box-sizing: border-box;
				background: linear-gradient(to top, #f5f7fc, #3b70ff);
				border-radius: 0 0 25px 25px;
				left: 0;
				top: 0;
				z-index: 1111;

				.search {
					width: 27px;
					height: 27px;
					background: #fff;
					border-radius: 50%;
				
					image {
						width: 12px;
						height: 12px;
					}
				}
				.type-box {
					position: relative;
					z-index: 11;
					background: #fff;
					height: 25px;
					font-size: 14px;
					border-radius: 25px;
					border: 2px solid #1e265d;
					color: #1e265d;
					min-width: 75px;

					image {
						width: 10px;
						height: 10px;
						margin-left: 2px;
					}
				}

				.bg-img {
					width: 100%;
					height: 105px;
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 0 0 25px 25px;
				}
			}

		}

	}

</style>